<template>
	<div style="position: relative">
		<div id="china"></div>
		<div class="toopdiv1">
			<p class="toopdivttitle">{{ nowcity }}</p>
			<div class="toopinlindiv">
				<p v-for="(item, index) in toopData">
					<span class="cicle"></span>{{ item.name }} ： <b style="font-size: 18px;color: white;"> {{ item.num
						}}</b>
				</p>
			</div>
		</div>
	</div>
</template>
<script lang="js">
// import * as echarts from 'echarts';
import chinamap from './china.json';
export default {
	name: 'ctditu',
	props: {
		dituData: {
			type: Array,
			default: [],
			required: true,
		},
	},
	data() {
		return {
			nowcity: '成都',
			myCharts2: null,
			geoCoordMap: {
				台湾: [121.5135, 25.0308],
				黑龙江: [127.9688, 45.368],
				内蒙古: [110.3467, 41.4899],
				吉林: [125.8154, 44.2584],
				北京市: [116.4551, 40.2539],
				辽宁: [123.1238, 42.1216],
				河北: [114.4995, 38.1006],
				天津: [117.4219, 39.4189],
				山西: [112.3352, 37.9413],
				陕西: [109.1162, 34.2004],
				甘肃: [103.5901, 36.3043],
				宁夏: [106.3586, 38.1775],
				青海: [101.4038, 36.8207],
				新疆: [87.9236, 43.5883],
				西藏: [91.11, 29.97],
				四川: [103.9526, 30.7617],
				重庆: [108.384366, 30.439702],
				山东: [117.1582, 36.8701],
				河南: [113.4668, 34.6234],
				江苏: [118.8062, 31.9208],
				安徽: [117.29, 32.0581],
				湖北: [114.3896, 30.6628],
				浙江: [119.5313, 29.8773],
				福建: [119.4543, 25.9222],
				江西: [116.0046, 28.6633],
				湖南: [113.0823, 28.2568],
				贵州: [106.6992, 26.7682],
				云南: [102.9199, 25.4663],
				广东: [113.12244, 23.009505],
				广西: [108.479, 23.1152],
				海南: [110.3893, 19.8516],
				上海: [121.4648, 31.2891],
			},
			chartsData: [
				{ name: '北京', value: 199 },
				{ name: '天津', value: 42 },
				{ name: '河北', value: 102 },
				{ name: '山西', value: 81 },
				{ name: '内蒙古', value: 47 },
				{ name: '辽宁', value: 67 },
				{ name: '吉林', value: 82 },
				{ name: '黑龙江', value: 123 },
				{ name: '上海', value: 24 },
			],
			option: null,
			toopData: [
				{
					name: '总站数',
					num: 198,
					key: 'cityCount',
				},
				{
					name: '直/交流桩数',
					num: 198,
					key: 'cityAcCount',
				},
				{
					name: '累计充电量(万度)',
					num: 198,
					key: 'cityCount',
				},
				{
					name: '累计充电次数',
					num: 198,
					key: 'cityTotalPower',
				},
				{
					name: '时长利用率',
					num: 198,
					key: 'timeRate',
				},
				{
					name: '容量利用率',
					num: 198,
					key: 'capacityRate',
				},
				{
					name: '累计预警次数',
					num: 198,
					key: 'alterNum',
				},
				{
					name: '今日订单数',
					num: 198,
					key: '今日订单数',
				},
				{
					name: '今日充电量(度)',
					num: 198,
					key: 'todayPower',
				},
			],
		};
	},
	created() {
		console.log(' this.chartsData11111111', chinamap);
		let that = this;
		// 图标颜色 要动态加载 push配置
		that.option = {
			backgroundColor: {
				type: 'linear',
				x: 0,
				y: 0,
				x2: 1,
				y2: 1,
				colorStops: [
					{
						offset: 0,
						color: '#091633', // 0% 处的颜色
					},
					{
						offset: 1,
						color: '#091633', // 100% 处的颜色
					},
				],
				globalCoord: false, // 缺省为 false
			},
			tooltip: {
				trigger: 'item',
				backgroundColor: 'rgb(0,0,0,0.5)', //提示框浮层的背景色
				borderWidth: 0, //提示框浮层的边框宽度
				padding: 0, //提示框浮层的内边距

				formatter: function (params) {
					// console.log('123123params', params);
					// 判断类型 只展示标记的提示窗
					var res = '';
					if (params.componentSubType == 'scatter' && params.seriesType == 'scatter') {
						res = `<div class="toopdiv">
								<p class="toopdivttitle">${params.data.name}</p>
								<div class="toopinlindiv">
									<p>
									<span class="cicle"></span> 总站数 : <b> ${params.value[2]}</b>
									</p >
								</div >
							</div > `;
					} else {
						res = null;
					}

					return res;
				},
			},

			geo: {
				//地图整体位置 地理坐标系组件用于地图的绘制
				map: 'china',
				show: true,
				roam: true, //是否开启鼠标缩放和平移漫游
				left: '25%',
				top: '25%', //地图位置
				zoom: 1.6, //缩放
				label: {
					//图形上的文本标签，可用于说明图形的一些数据信息
					normal: {
						show: false,
					},
					emphasis: {
						show: false,
					},
				},
				itemStyle: {
					//地图区域的多边形 图形样式。
					normal: {
						areaColor: '#0f2346',
						borderColor: '#0f7ec4', //线
						shadowColor: '#092f8f', //外发光
						shadowBlur: 40,
					},

					// regions  //在地图中对特定的区域配置样式
				},
				emphasis: {
					//鼠标悬浮时
					itemStyle: {
						areaColor: '#D8BC37', //悬浮区背景
						borderColor: '#0f7ec4', //线
						shadowColor: '#092f8f', //外发光
						shadowBlur: 40,
					},
				},
				// select: {
				// 	//鼠标悬浮时
				// 	itemStyle: {
				// 		areaColor: '#D8BC37', //悬浮区背景
				// 	}
				// },
			},
			series: [
				{
					//当前位置点
					symbolSize: 5, //气泡大小
					label: {
						//气泡标签  文字
						normal: {
							formatter: '{b}',
							position: 'right',
							show: true,
							color: 'white',
						},
						emphasis: {
							//高亮
							show: true,
						},
					},
					itemStyle: {
						normal: {
							color: '#fff',
						},
					},
					name: 'light',
					type: 'scatter',
					coordinateSystem: 'geo',
					data: this.convertData(this.chartsData),
				},
				{
					type: 'map',
					name: 'china',
					map: 'china',
					zoom: 15,
					left: '10',
					// center: [115.97, '30%'],//地图中心点
					geoIndex: 0, //地图类型
					showLegendSymbol: false, // 存在legend时显示
					label: {
						normal: {
							show: false,
						},
						emphasis: {
							show: false,
							textStyle: {
								color: '#fff',
							},
						},
					},
					roam: true, //是否开启鼠标缩放和平移漫游

					animation: true,
					data: this.chartsData,
				},
				{
					// 悬浮气泡内的文字
					name: 'Top 5',
					type: 'scatter', //

					coordinateSystem: 'geo',
					symbol: 'pin',
					symbolSize: [30, 30],
					label: {
						normal: {
							show: false,
							textStyle: {
								color: '#fff',
								fontSize: 9,
							},
							formatter(value) {
								return value.data.value[2];
							},
						},
					},
					data: this.convertData(this.chartsData),
					showEffectOn: 'render',
					rippleEffect: {
						brushType: 'stroke',
					},
					hoverAnimation: true,
					// zlevel: 1,
				},
			],
		};
	},
	watch: {

		dituData: {
			deep: true,
			immediate: true,
			handler(newVal, oldVal) {
				console.log('dituDatadituData', newVal);

				this.nowcity = newVal[0].cityName;
				this.toopData.forEach((element) => {
					element.num = newVal[0][element.key];
				});
				this.chartsData = newVal.map((item) => ({
					name: item.cityName,
					value: item.cityCount,
					data: item,
				}));
				this.geoCoordMap = newVal.reduce((acc, { lat, lng, cityName }) => {
					acc[cityName] = [lng, lat];
					return acc;
				}, {});
				setTimeout(() => {
					this.initecharts();
				}, 2000);
			},
		},
	},
	methods: {
		initecharts() {
			var that = this;
			this.myCharts2 = this.$echarts.init(document.getElementById('china'));
			this.$echarts.registerMap('china', { geoJson: chinamap });
			// this.myCharts2.removeAttribute('_echarts_instance_');
			this.myCharts2.setOption(this.option);
			this.myCharts2.on('click', function (params) {
				if (params.seriesType === 'scatter' && params.dataIndex !== undefined) {
					console.log('点击了地图上的', params);
					that.nowcity = params.data.name;
					that.toopData.forEach((element) => {
						element.num = params.data.data[element.key];
					});
					// 执行其他逻辑...
				}
			});

			var count = 0;
			var timeTicket = null;
			var dataLength = this.option.series[0].data.length;

			timeTicket && clearInterval(timeTicket);
			timeTicket = setInterval(function () {
				// console.log(' (count) % dataLength', count, (count) % dataLength);
				// 取消高亮
				that.myCharts2.dispatchAction({
					type: 'downplay',
					seriesIndex: [0, 2],
				});
				// that.myCharts2.dispatchAction({
				// 	type: 'downplay',
				// 	seriesIndex: 2
				// })
				that.myCharts2.dispatchAction({
					type: 'downplay',
					seriesName: 'china',
				});
				// 开启高亮气球显示
				that.myCharts2.dispatchAction({
					type: 'highlight',
					seriesIndex: 2,
					dataIndex: count % dataLength,
				});
				// 开启高亮地图显示
				that.myCharts2.dispatchAction({
					type: 'highlight',
					seriesName: 'china', //'china',
					dataIndex: count % dataLength,
				});
				// 开启高亮提示框显示
				that.myCharts2.dispatchAction({
					type: 'showTip',
					seriesIndex: 0,
					dataIndex: count % dataLength,
				});
				count++;
			}, 3000);
			// this.myCharts2.on('mouseover', function (params) {
			// 	console.log(params)
			// 	clearInterval(timeTicket);
			// 	this.myCharts2.dispatchAction({
			// 		type: 'downplay',
			// 		seriesIndex: 0
			// 	});
			// 	this.myCharts2.dispatchAction({
			// 		type: 'highlight',
			// 		seriesIndex: 0,
			// 		dataIndex: params.dataIndex
			// 	});
			// 	this.myCharts2.dispatchAction({
			// 		type: 'showTip',
			// 		seriesIndex: 0,
			// 		dataIndex: params.dataIndex,
			// 	});
			// });
			// this.myCharts2.on('mouseout', function (params) {
			// 	timeTicket && clearInterval(timeTicket);
			// 	timeTicket = setInterval(function () {
			// 		this.myCharts2.dispatchAction({
			// 			type: 'downplay',
			// 			seriesIndex: 0,
			// 		});
			// 		this.myCharts2.dispatchAction({
			// 			type: 'highlight',
			// 			seriesIndex: 0,
			// 			dataIndex: (count) % dataLength
			// 		});
			// 		this.myCharts2.dispatchAction({
			// 			type: 'showTip',
			// 			seriesIndex: 0,
			// 			dataIndex: (count) % dataLength
			// 		});
			// 	count++;
			// }, 1000);
			// });
		},
		convertData(params) {
			var res = [];
			console.log(' this.chartsData222222', this.chartsData);
			for (var i = 0; i < this.chartsData.length; i++) {
				var geoCoord = this.geoCoordMap[this.chartsData[i].name];
				if (geoCoord) {
					res.push({
						name: this.chartsData[i].name,
						value: geoCoord.concat(this.chartsData[i].value),
						data: this.chartsData[i].data,
					});
				}
			}
			console.log('convertData-convertData', res);

			return res;
		},
	},
	mounted() {
		setTimeout(() => {
			this.initecharts();
		}, 2000);
	},
};
</script>
<style lang="less">
#china {
	width: 700px;
	height: 500px;
	// position: relative;
}

.toopdiv,
.toopdiv1 {
	color: #1484ec;
	font-size: 16px;
	border: 1px solid #3f96aa;
	box-sizing: border-box;
	padding: 15px;
	// width: 215px;
	background: rgb(10 10 10 / 20%);

	.toopdivttitle {
		font-size: 18px;
		font-weight: 700;
		border-bottom: 1px solid #3f96aa;
		margin-bottom: 10px;
	}

	.cicle {
		display: inline-block;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		margin-right: 5px;
		background-color: #1484ec;
	}

	.toopinlindiv p {
		margin-bottom: 3px;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		white-space: nowrap;
	}
}

.toopdiv1 {
	position: absolute;
	top: 0px;
	left: 0px;
}
</style>
